<template>
  <div id="teamPage">
    <van-search
        v-model="searchText"
        placeholder="搜索队伍"
        :clearable=true
        @search="onSearch"
        show-action
    >
      <!-- 使用 action 插槽自定义右侧内容 -->
      <template #action>
        <van-button type="primary" @click="onSearch(searchText)">搜索</van-button>
      </template>
    </van-search>
    <van-tabs v-model:active="active" @change="onTabChange">
      <van-tab title="公开" name="public"/>
      <van-tab title="加密" name="private"/>
    </van-tabs>
    <van-button class="add-button" type="primary" icon="plus" @click="toAddTeam"/>
    <team-card-list :teamList="teamList"/>
    <van-empty v-if="teamList.length<1" description="数据为空"/>
  </div>
</template>

<script setup lang="ts">

import {useRouter} from "vue-router";
import TeamCardList from "../components/TeamCardList.vue";
import myAxios from "../plugins/myAxios.ts";
import {onMounted, ref} from "vue";
import {Toast} from "vant";

const router = useRouter();

const active = ref("public")
const searchText = ref('');

/**
 * 切换查询状态
 * @param name
 */
const onTabChange = (name) => {
  // 查公开
  if (name === 'public') {
    listTeam(searchText.value, 0);
  } else {
    // 查加密
    listTeam(searchText.value, 2);
  }
}

// 跳转创建队伍页面
const toAddTeam = () => {
  router.push({
    path: "/team/add"
  })
}

const teamList = ref([]);

// 队伍搜索方法
const listTeam = async (val = '', status = 0) => {
  const res = await myAxios.get("/team/list", {
    params: {
      searchText: val,
      pageNum: 1,
      status,
    },
  });
  if (res?.code === 0) {
    teamList.value = res.data;
  } else {
    Toast.fail("加载队伍失败，请刷新")
  }
}

// 页面加载时触发一次，查询队伍
onMounted(() => {
  listTeam()
})

// 搜索
const onSearch = (val) => {
  listTeam(val)
}

</script>

<style scoped>

</style>